<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}
</style>
<body>
    <h1>闭包</h1>
    <h2>闭包：函数作为返回值，一个内存函数可以访问到外层函数的作用域。</h2>
    <a href="#" id="size-12">12</a>
    <a href="#" id="size-14">14</a>
    <a href="#" id="size-16">16</a> 
</body>
<script>
    // 闭包：一个函数和对其周围状态的引用捆绑在一起，这样的组合就说闭包。也就是说，闭包可以让你在一个内层函数中访问到其外层函数的作用域。
    //在JavaScript中每当创建一个函数，闭包就会在函数被创建的同时被创建出来。

    // 1.正常的函数
    // function init () {
    //     var name = 'mary'
    //     function displayName() {
    //         alert(name)
    //     }
    //     displayName()
    // }
    // init()
    // 闭包
    // function init() {
    //     var name = 'anmani'
    //     function  displayName() {
    //         alert(name)
    //     }
    //     return displayName
    // }
    // var myFun =   init()
    // myFun()
    // function mackAdder(x) {
    //     return function count(y) {
    //          console.log( x + y)
    //     }
    // }
    // var adderC1 = mackAdder(5)
    // var adderC2 = mackAdder(7)
    // adderC1(2)
    // adderC2(3)
    // function makeSize (size) {
    //     return function () {
    //         document.body.style.fontSize = size + 'px'
    //     }
    // }
    // var size12 = makeSize(12);
    // var size14 = makeSize(14);
    // var size16 = makeSize(16);
    // // var size14 = makeSize(14)
    // // var size16 = makeSize(16)
    // document.getElementById('size-12').onclick = size12
    // document.getElementById('size-14').onclick = size14
    // document.getElementById('size-16').onclick = size16

    // 模块模式（model pattern）
    // var Counter = (
    //     function() {
    //         var privateCounter = 0;
    //         function changeBy(val) {
    //             privateCounter += val
    //         }
    //         return {
    //             increment:function() {
    //                 changeBy(1)
    //             },
    //             decrement:function() {
    //                 changeBy(-1)
    //             },
    //             value:function() {
    //                 return privateCounter
    //             }
    //         }
    //     }
    // )()
    // console.log(Counter.value()); /* logs 0 */
    // Counter.increment();
    // Counter.increment();
    // console.log(Counter.value()); /* logs 2 */
    // Counter.decrement();
    // console.log(Counter.value()); /* logs 1 */

    //  创建多个变量独立
    // var makeCounter = function() {
    //     var privateCounter = 0
    //     function changeBy(val) {
    //         privateCounter += val
    //     }
    //     return {
    //         increment() {
    //             changeBy(1)
    //         },
    //         decrement() {
    //             changeBy(-1)
    //         },
    //         value() {
    //             return privateCounter
    //         }
    //     }
    // }
    // var Counter1 = makeCounter()
    // var Counter2 = makeCounter()
    // console.log(Counter1.value())

    // Counter1.increment()
    // Counter1.increment()
    // console.log(Counter1.value())
    // Counter2.increment()
    // Counter2.increment()
    // Counter2.increment()
    // console.log(Counter2.value())

//     　function f1(x = 2){
// 　　　　var n=999;
//         n += x
//         return function() {
//             alert(n)
//         }
// 　　}

//     var result = f1()
//     var result1 = f1(1)
//     result()
//     result1()
// function f1() {
//     var n = 999
//     nAdd = function() { n += 1}
//     function f2 () {
//         alert(n)
//     }
//     return f2

// }
// var result = f1()
// result()
// nAdd()
// result()

var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
        console.log(this)
　　　　　　return function(){
    console.log(this)

　　　　　　　　return this.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());
</script>
</html>